import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { IntlProvider, addLocaleData } from 'react-intl';
// antd 国际化
import { LocaleProvider, Spin } from 'antd';

import loadIcon from './LoadIcon';

import moment from 'moment';
// 导入moment语言包
import 'moment/locale/zh-cn';
import 'moment/locale/en-gb';

// language mobx 数据仓库
import language from '@/stores/language';

@inject('global')
@observer
class IntlProviderWrap extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { lang, momentLang, defaultLocale, antd, messages } = language;
    // react-intl 内置语言包
    addLocaleData(defaultLocale);
    // moment语言包设置
    moment.locale(momentLang);
    const { children, global } = this.props;
    return (
      <IntlProvider key={lang} locale={lang} messages={messages}>
        <LocaleProvider locale={antd}>
          <Spin spinning={global.loading} indicator={loadIcon} tip={global.loadingTip}>
            {children}
          </Spin>
        </LocaleProvider>
      </IntlProvider>
    );
  }
}
export default IntlProviderWrap;
